<script lang="ts" setup>
import { ref } from 'vue'
import type { Ref } from 'vue'
import { getList,getFoodList } from '@/api/find'


interface iList {
    id: number
    url: string
    title: string
    nav: string
    test: string
}
const navList: Ref<iList[]> = ref([])
navList.value = getList()

interface iFood {
    name: string
    img: string 
}
const foodList: Ref<iFood[]> = ref([])
// 绑定当前选中标签的标识符
let active = ref(0)

// 美食
function food(data: { title: string }) {
   console.log(data.title);
   getFoodList({name: data.title}).then(res => {
    // console.log(res)
    foodList.value = res.data
    console.log(foodList.value);
    
   })
}
</script>

<template>
    <!-- 标题 -->
    <div class="box">
        <header>
            <h3>搜索发现</h3>
            <select>
                <option value="">珠海</option>
            </select>
        </header>


        <!-- 导航栏 -->
        <div class="title">
            <van-sticky>
                <van-tabs style="position: sticky; top:0px" @click-tab="food" v-model:active="active" >
                    <van-tab v-for="item in navList" :key="item.id" :title="item.nav" >
                    </van-tab>
                </van-tabs>
            </van-sticky>
        </div>


        <div class="content">
            <van-grid :column-num="2">
                <van-grid-item v-for="item in navList">
                    <van-image :src=item.url />
                    <p>
                        <van-icon name="map-marked" color="gray" />
                        {{ item.title }}
                    </p>
                    <div class="icon">
                        <div class="username">
                            <van-icon color="skyblue" name="contact" />
                            <span>吃个鸭梨</span>
                        </div>
                        <div class="like">
                            <van-icon color="gray" name="thumb-circle-o" />
                            <span>22</span>
                        </div>

                    </div>
                </van-grid-item>
            </van-grid>


        </div>
    </div>
</template>
<style lang="scss" scoped>
header {
    height: 50px;
    background-color: #00a8ff;
    position: relative;


    h3 {
        color: white;
        text-align: center;
    }

    select {
        width: 55px;
        height: 30px;
        position: absolute;
        top: 8px;
        right: 15px;
        background-color: #f5f5f5;
        outline: none;
    }
}

.box {
    flex: 1;

    display: flex;
    flex-direction: column;
    overflow: auto;
}

.content {
    padding-bottom: 100px;
}

.van-grid-item .van-image {
    width: 100%;
}

.icon {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .username {
        display: flex;
        align-items: center;

        span {
            margin-left: 5px;
        }
    }

    .like {
        display: flex;
        align-items: center;

        span {
            margin-left: 5px;
        }
    }
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}

.my-swipe .van-swipe-item {
    line-height: 180px;
    height: 180px;
}

.van-swipe-item img {
    width: 100%;
    height: 100%;
}
</style>